import React, {Component} from "react";
import {CSSTransition} from 'react-transition-group'

class Boss extends Component{
    constructor(props){
        super(props);
        this.state={
            isShow:true,
            isShow2:true,
            isShow3:true
        };
        this.bossToggle = this.bossToggle.bind(this);
        this.bossToggle2 = this.bossToggle2.bind(this);
        this.bossToggle3 = this.bossToggle3.bind(this);
    }

    render() {
        return (
            <div>
                <h3>css3transition动画</h3>
                <div className={this.state.isShow?'boss1 show':'boss1 hide'}>孙悟空</div>
                <button onClick={this.bossToggle}>召唤boss</button>
                <h3>keyframes动画</h3>
                <div className={this.state.isShow2?'boss2 show':'boss2 hide'}>白骨精</div>
                <button onClick={this.bossToggle2}>召唤boss</button>
                <h3>CSSTrasition</h3>
                <CSSTransition
                    in={this.state.isShow3}
                    timeout={1000}
                    classNames='boss3'>
                    <div className={'boss3'}>召唤boss</div>
                </CSSTransition>
                <button onClick={this.bossToggle3}>召唤boss</button>
            </div>
        );
    }
    bossToggle(){
        this.setState({
            isShow: !this.state.isShow
        })
    }
    bossToggle2(){
        this.setState({
            isShow2: !this.state.isShow2
        })
    }
    bossToggle3(){
        this.setState({
            isShow3: !this.state.isShow3
        })
    }
}

export default Boss
